﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml-transitional.dtd">

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bing Maps - AJAX 7.0</title>
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
    <script type="text/javascript">
        var map = null;
        var pinCount = 0;
        var location;
        var pin_list = [];
        var selectedPinDetails = [];
        var currentZoom = 10;

        function GetMap() {
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                {
                    credentials: "AloaQ-IdbmQ-404BuzyqxUmAihnb1mCR42PvMXYtpaR_UNWeiNhy7Uh2U9ESl-LA",
                    center: new Microsoft.Maps.Location(47.2, -122.5),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: 10
                });

            pinCount = 0;

            Microsoft.Maps.Events.addHandler(map, 'click', function (e) {
                if (e.targetType == "map") {
                    var point = new Microsoft.Maps.Point(e.getX(), e.getY());
                    var loc = e.target.tryPixelToLocation(point);
                    location = new Microsoft.Maps.Location(loc.latitude, loc.longitude);
                }
            });
        }

        function getZoom() {
            return map.getZoom();
        }

        function getLat() {
            try {
                return location.latitude;
            }
            catch (e) {
                return "";
            }
        }

        function getLon() {
            try {
                return location.longitude;
            }
            catch (e) {
                return "";
            }
        }

        function centerMap(lat, long, zoom) {
            currentZoom = zoom;
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                {
                    credentials: "AloaQ-IdbmQ-404BuzyqxUmAihnb1mCR42PvMXYtpaR_UNWeiNhy7Uh2U9ESl-LA",
                    center: new Microsoft.Maps.Location(lat, long),
                    mapTypeId: Microsoft.Maps.MapTypeId.road,
                    zoom: parseInt(zoom)
                });

            pinCount = 0;
        }
        
        function getMapCenter(){
            return map.getCenter().toString().replace("[Location ", "").replace("]","");
        }

        function addPin(lat, long, title, description, datetime) {
            var loc = new Microsoft.Maps.Location(lat, long);
            var count = ++pinCount;
            var pin = new Microsoft.Maps.Pushpin(loc, { text: '' + count });

            description = datetime + " : " + description;

            var infoBox = new Microsoft.Maps.Infobox(pin.getLocation(),
                {
                    title: title,
                    description: description,//.replace('\n', '', 'g').substring(0, 50) + '...',
                    visible: false,
                    offset: new Microsoft.Maps.Point(0, 15),
                    showPointer: true
                });

            Microsoft.Maps.Events.addHandler(pin, 'mouseover', function () { infoBox.setOptions({ visible: true }); });
            Microsoft.Maps.Events.addHandler(infoBox, 'mouseleave', function () { infoBox.setOptions({ visible: false }); });
            //Microsoft.Maps.Events.addHandler(pin, 'mouseout', function () { infoBox.setOptions({ visible: false }); });

            map.entities.push(pin);
            pin_list[pinCount - 1] = pin;
            map.entities.push(infoBox)
        }

        function drawCircle(latitude, longitude, radius) {
            var R = 6371; //earth's mean radius in km
            var lat = (latitude * Math.PI) / 180;
            var lon = (longitude * Math.PI) / 180;
            var d = parseFloat(radius) / R; // d = angular distance covered on earth's surface
            circlePoints = new Array();
            for (x = 0; x <= 360; x++) {
                var p2 = new Microsoft.Maps.Location(0, 0);
                brng = x * Math.PI / 180;
                p2.latitude = Math.asin(Math.sin(lat) * Math.cos(d) + Math.cos(lat) * Math.sin(d) * Math.cos(brng));
                p2.longitude = ((lon + Math.atan2(Math.sin(brng) * Math.sin(d) * Math.cos(lat), Math.cos(d) - Math.sin(lat) * Math.sin(p2.latitude))) * 180) / Math.PI;
                p2.latitude = (p2.latitude * 180) / Math.PI;
                circlePoints.push(p2);
            }

            var polygoncolor = new Microsoft.Maps.Color(35, 0, 50, 0);
            var polygon = new Microsoft.Maps.Polygon(circlePoints, { fillColor: polygoncolor, strokeColor: polygoncolor });

            map.entities.push(polygon);
        }

        function clearMap() {
            map.entities.clear();
        }

        function selectPin(pin_num) {
            if (pin_list == null) { return; }
            var ents = pin_list[pin_num];
            if (ents == null) { return; }
            if (selectedPinDetails.length > 0) {
                pin_list[selectedPinDetails[0]].setOptions({ zIndex: 0, typeName: '' });
            }
            selectedPinDetails = [pin_num];
            ents.setOptions({ typeName: 'sampleCustom', zIndex: 1 });
        }

        function getLocation(searchText) {
            map.getCredentials(function (credentials) {
                var searchRequest = 'http://dev.virtualearth.net/REST/v1/Locations/' + searchText + '?output=json&jsonp=SearchServiceCallback&key=' + credentials;
                var mapscript = document.createElement('script');
                mapscript.type = 'text/javascript';
                mapscript.src = searchRequest;
                document.getElementById('SDKmap').appendChild(mapscript);
            });
        }


    </script>
    <style type="text/css">
        .sampleCustom div {
            color: blue !important;
        }
    </style>

</head>
<body onload="GetMap();">
    <div id="mapDiv" style="position: absolute; width: 95%; height: 95%;"></div>
</body>
</html>
